<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>选项卡</title>
		<link rel="stylesheet" href="./Bootstrap4.6.1/css/bootstrap.css">
		<script src="./Bootstrap4.6.1/js/jquery.js"></script>
		<script src="./Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
	</head>
	<body>
		
		<!-- 导航菜单 -->
		<nav>
		  <div class="nav nav-tabs" id="nav-tab" role="tablist">
		    <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#tab01" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
		    <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#tab02" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
		    <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#tab03" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
		  </div>
		</nav>
		<!-- 选项卡内容部分 -->
		<div class="tab-content" id="nav-tabContent">
		  <div class="tab-pane fade show active" id="tab01" role="tabpanel" aria-labelledby="nav-home-tab">选项卡1</div>
		  <div class="tab-pane fade" id="tab02" role="tab02" aria-labelledby="nav-profile-tab">选项卡2</div>
		  <div class="tab-pane fade" id="tab03" role="tab03" aria-labelledby="nav-contact-tab">选项卡3</div>
		</div>
		
	</body>
</html>